font-monospace()
	letter-spacing 0
	font-family 'Fira Code', monospace
	font-variant-ligatures normal !important

$input-height = 1.8rem
$button-height = 1.4rem
$input-horiz-margin = 0.6rem

input-transition($prop = all)
	transition $prop 0.1s ease

input()
	width 6em
	height $input-height
	border none
	border 1px solid transparent
	border-radius 2px
	background var(--input)
	color var(--foreground)
	font-size inherit
	input-transition(border-color)

	&:hover
		border-color var(--hover)

	&:focus
		border-color var(--hover)

input-border()
	border 1px solid transparent
	border-radius 2px
	input-transition(border-color)

	&:hover
		border-color var(--hover)

	&:focus
		border-color var(--hover)

translucent-bg()
	background var(--translucent)
	backdrop-filter blur(16px)

labeled-button()
	padding-top 0.2rem
	height $button-height
	border-radius 2px
	background var(--button)
	color var(--background)
	font-size 0.9em
	input-transition(all)

	&:hover, &:focus
		background var(--hover)